
<template>
    <div class="register">
        <canvas id="dotCanvas" style="position: absolute"></canvas>
        <el-container>
            <el-main>
                <div class="conunt">
                    <h2 style="text-align: center; margin: 20px">
                        {{ registerType }}注册
                    </h2>
                    <el-form
                        status-icon
                        label-width="100px"
                        class="demo-ruleForm"
                    >
                        <el-form-item label="注册类型：">
                            <el-radio-group v-model="registerType">
                                <el-radio label="用户">用户</el-radio>
                                <el-radio label="出租方">出租方</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="账号：">
                            <el-input
                                v-model="account"
                                style="width: 300px"
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="密码：" prop="password">
                            <el-input
                                type="passwordword"
                                v-model="password"
                                autocomplete="off"
                                style="width: 300px"
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="联系电话">
                            <el-input
                                v-model="phone"
                                style="width: 300px"
                            ></el-input>
                        </el-form-item>

                        <el-form-item
                            label="姓名："
                            v-if="registerType == '用户'"
                        >
                            <el-input
                                v-model="name"
                                style="width: 300px"
                            ></el-input>
                        </el-form-item>

                        <el-form-item
                            label="身份证号"
                            v-if="registerType == '用户'"
                        >
                            <el-input
                                v-model="IDCard"
                                style="width: 300px"
                            ></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="changeLessLorsBut"
                                style="margin-left: 85px"
                                >注册</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

const {
    mapState: lessorsMapState,
    mapMutations: lessorsMapMutations,
    mapActions: lessorsMapActions,
} = createNamespacedHelpers("lessors");

const {
    mapState: tenantsMapState,
    mapMutations: tenantsMapMutations,
    mapActions: tenantsMapActions,
} = createNamespacedHelpers("tenants");

export default {
    data() {
        return {
            account: "",
            password: "",
            phone: "",
            name: "",
            IDCard: "",
            registerType: "用户", //注册类型
        };
    },
    watch: {
        registerType() {},
    },
    mounted() {
        this.dotLc();
    },
    methods: {
        ...lessorsMapMutations(["changeLessLors"]),
        ...lessorsMapActions(["lessorsRegister", "isRegister"]),

        ...tenantsMapMutations(["changeLenantsData"]),
        ...tenantsMapActions(["tenantsRegister", "istenantsRegister"]),

        //注册按钮
        changeLessLorsBut() {
            if (
                this.registerType == "出租方" &&
                (this.account == "" || this.password == "" || this.phone == "")
            ) {
                alert("用户名,密码或手机号不能为空");
            } else if (
                this.registerType == "用户" &&
                (this.account == "" ||
                    this.password == "" ||
                    this.phone == "" ||
                    this.name == "" ||
                    this.IDCard == "")
            ) {
                alert("用户名、密码、手机号、身份证、姓名不能为空");
            } else {
                this.open();
            }
        },

        /****************************弹框确认注册选择***************************************/
        open() {
            this.$confirm(`您确定注册成为${this.registerType}吗？`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const data = {
                        account: this.account,
                        password: this.password,
                        phone: this.phone,
                    };
                    //注册成为出租方
                    if (this.registerType == "出租方") {
                        this.changeLessLors(data);
                        let result = await this.isRegister(); //验证账号是否存在
                        console.log(result);
                        if (result) {
                            await this.lessorsRegister();
                            this.$router.push("/login");
                        }
                    }
                    //注册成为用户
                    else if (this.registerType == "用户") {
                        const tenantsdata = {
                            ...data,
                            name: this.name,
                            IDCard: this.IDCard,
                        };
                        this.changeLenantsData(tenantsdata);
                        let result = await this.istenantsRegister();
                        if (result) {
                            await this.tenantsRegister();
                            this.$router.push("/login");
                        }
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "您已取消选择",
                    });
                });
        },

        /************************粒子动画*****************************/
        dotLc() {
            //Dot
            class Dot {
                constructor(x, y, r, color) {
                    //表示圆心坐标 x y
                    this.x = x;
                    this.y = y;
                    this.color = color; //颜色
                    this.r = r; //半径
                    this.angle = Math.random() * 2 * Math.PI;
                    this.speedX = Math.random() * 4 - 2; //x轴的速度 -2~2
                    this.speedY = Math.random() * 2 - 1; //y轴的速度 -1~1
                }
                move(width, height) {
                    // 当未出界，照常运动，否则速度取反
                    if (this.x < this.r) {
                        this.speedX = Math.abs(this.speedX);
                    }
                    if (this.y < this.r) {
                        this.speedY = Math.abs(this.speedY);
                    }
                    if (this.x > width - this.r) {
                        this.speedX = -Math.abs(this.speedX);
                    }
                    if (this.y > height - this.r) {
                        this.speedY = -Math.abs(this.speedY);
                    }

                    this.x += this.speedX;
                    this.y += this.speedY;
                }
                //返回当前点和另个一点圆心之间的距离
                dotDistance(otherDot) {
                    return Math.sqrt(
                        Math.pow(this.x - otherDot.x, 2) +
                            Math.pow(this.y - otherDot.y, 2)
                    );
                }
            }

            /***************************************************************************/
            //全局的变量
            var canvas = document.getElementById("dotCanvas");
            var ctx = canvas.getContext("2d");
            var dots = []; //保存所有的dot对象，便于统一绘制
            var maxRadius = 10; //最大半径
            var distance = 200; // 两点连线的最大距离
            var mouseX = -1; //保存鼠标坐标X
            var mouseY = -1; //保存鼠标坐标Y
            var mouseR = 300; //鼠标圆的半径

            //设置canvas的宽高为页面宽高
            canvas.width = innerWidth;
            canvas.height = innerHeight;

            // 01 - 随机点的绘制
            function createDot() {
                var r = Math.random() * maxRadius;
                var x = r + Math.random() * (canvas.width - 2 * r);
                var y = r + Math.random() * (canvas.height - 2 * r);
                var color = `rgba(${parseInt(Math.random() * 256)},${parseInt(
                    Math.random() * 256
                )},${parseInt(Math.random() * 256)},${Math.random()})`;
                var newDot = new Dot(x, y, r, color);
                //加入数组中
                dots.push(newDot);
            }

            // 绘制所有的点
            function drawDots() {
                dots.forEach((dot) => {
                    dot.move(canvas.width, canvas.height); //每个点移动一次
                    drawLine(dot); //创建线条
                    ctx.beginPath();
                    ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2, false);
                    ctx.fillStyle = dot.color;
                    ctx.fill();
                    ctx.stroke();
                    ctx.closePath();
                });
            }
            //03
            //绘制线条
            // dot 和数组的其他点进行比较
            function drawLine(dot) {
                dots.forEach((d) => {
                    //不是同一个点，并且两点之间的距离小于指定的距离
                    if (
                        d !== dot &&
                        dot.dotDistance(d) < distance &&
                        insideMouse(d, dot)
                    ) {
                        //进行连线
                        ctx.beginPath();
                        ctx.moveTo(dot.x, dot.y); //画笔移动到一个点的圆心处
                        ctx.lineTo(d.x, d.y);
                        ctx.strokeStyle = dot.color;
                        ctx.closePath();
                        ctx.stroke();
                    }
                });
            }

            //04  -鼠标跟随连线
            document.body.addEventListener("mousemove", function (e) {
                mouseX = e.clientX;
                mouseY = e.clientY;
            });
            //判断两个点是否在圆内
            function insideMouse(dot1, dot2) {
                //dot1和鼠标坐标之间的距离
                var dis1 = Math.sqrt(
                    Math.pow(dot1.x - mouseX, 2) + Math.pow(dot1.y - mouseY, 2)
                );
                //dot2和鼠标坐标之间的距离
                var dis2 = Math.sqrt(
                    Math.pow(dot2.x - mouseX, 2) + Math.pow(dot2.y - mouseY, 2)
                );
                return dis1 < mouseR && dis2 < mouseR;
            }

            //测试
            for (var i = 0; i < 50; i++) {
                createDot();
            }

            setInterval(() => {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawDots();
            }, 16.7);
        },
    },
};
</script>











<style lang="scss">
.register {
    // .el-container {
    //     position: absolute;
    // }
    height: 100vh;
    .el-container {
        height: 100%;
    }
    .el-main {
        background-color: #e9eef3;
        color: #333;
        height: 100%;
    }
    .conunt {
        width: 30%;
        margin: 10px;
        padding: 10px;
        box-shadow: 0 0 5px black;
        margin: 100px auto;
    }
}
</style>